<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/css/clear.css">
    <link rel="stylesheet" href="/static/css/personal.css">
    <script src="/static/js/jquery-1.12.2.js"></script>

    <title>个人中心</title>
    <link rel="icon" href="/static/images/title-lolg.png">

</head>

<body>
<div th:replace="/common/head::#header"></div>

    <!-- 页面主体 -->
    <div class="main">
        <div class="content">
            <div class="left">
                <ul>
                    <li>个人中心</li>
                    <li class="activeli"><a href="/movie/order/personalOrder">我的订单</a></li>
                    <li><a href="/profile.html">基本信息</a></li>
                </ul>
            </div>
            <div class="ringht">
                <div class="top">
                    <p>我的订单</p>
                </div>
                <ul>
                    <li th:each="order:${orders}">
                        <div class="tops">
                            <p>
                                <span th:text="${#dates.format(order.createDate,'yyyy-MM-dd')}">2018-12-09</span>
                                <span>淘票票订单编号:[[${order.orderSn}]]</span>
                            </p>
                            <i>
                            </i>
                        </div>
                        <div class="bottoms">
                            <div class="lefts">
                                <i>
                                    <img  th:src="${order.movieImg}" alt="">
                                </i>
                                <div class="name">
                                    <p th:text="${order.movieName}">《命运之夜-天之杯 第一章：恶兆之花》</p>
                                    <p th:text="${order.movieTheatreBrand+'('+order.movieTheatreName+')'}">金逸IMAX影城(鹏瑞利店)</p>
                                    <p>
                                        <span th:text="${order.videoHall}"></span>
                                        <span th:each="seat,index:${order.seats.split(',')}" th:text="${index.index+1==order.seats.split(',').length?seat:seat+' | '}"></span>
                                    </p>
                                    <p th:text="${order.startDateStr}">周日 12月9日 14:20</p>
                                </div>
                            </div>
                            <div class="ringhts">
                                <span th:text="${'￥'+order.price}">￥86</span>
                                <span th:if="${order.orderState==0}">待付款</span>
                                <span th:if="${order.orderState==1}">已付款</span>
                                <span th:if="${order.orderState==2}">以退款</span>
                                <span th:if="${order.orderState==4}">已取消</span>

                                <span th:if="${order.orderState==0}"><a th:href="${'/movie/order/pay?orderSn='+order.getOrderSn()}" style="color: red">点击付款</a></span>
                                <span th:if="${order.orderState==1 and #dates.createNow().getTime()+(1000 * 60 * 30)-order.startDate.getTime()<0}"><a th:href="${'/movie/order/refund?orderSn='+order.getOrderSn()}" style="color: red">点击退款</a></span>
                                <span th:if="${order.orderState==1 and #dates.createNow().getTime()+(1000 * 60 * 30)-order.startDate.getTime()>0} ">查看详情</span>
                                <span th:if="${order.orderState==2 || order.orderState==4}">查看详情</span>

                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 页面底部 -->
<div th:replace="common/bottom::#bottom"></div>

    <script src="/static/js/ajax.js"></script>
    <script src="/static/js/mock-min.js"></script>
    <script src="/static/js/server.js"></script>
    <!--<script src="/static/js/index.js"></script>-->
</body>

</html>